<template>
    <el-dialog
        v-model="tenantAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="tenantDataForm" :rules="tenantRules" ref="tenantDataFormRef">
                <el-form-item label="租户编码" label-width="20%" prop="tenantId">
                    <el-input v-model="tenantDataForm.tenantId" placeholder="租户编码" clearable />
                </el-form-item>
                <el-form-item label="租户名称-中文" label-width="20%" prop="tenantNameCn">
                    <el-input v-model="tenantDataForm.tenantNameCn" placeholder="租户名称-中文" clearable />
                </el-form-item>
                <el-form-item label="租户名称-英文" label-width="20%" prop="tenantName">
                    <el-input v-model="tenantDataForm.tenantName" placeholder="租户名称-英文" clearable />
                </el-form-item>
                <el-form-item label="租户所属用户" label-width="20%" prop="componentId">
                    <el-select v-model="tenantDataForm.tenantAdminUserId" clearable filterable placeholder="租户所属用户">
                        <el-option :value="item.id" :label="item.userAccount" v-for="item in userInfoList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租户详情描述" label-width="20%" prop="tenantDescription">
                    <el-input v-model="tenantDataForm.tenantDescription" placeholder="租户详情描述" clearable />
                </el-form-item>
                <el-form-item label="租户源公司名称" label-width="20%" prop="tenantCompanyName">
                    <el-input v-model="tenantDataForm.tenantCompanyName" placeholder="租户源公司名称" clearable />
                </el-form-item>
                <el-form-item label="租户源联系方式" label-width="20%" prop="tenantCompanyContact">
                    <el-input v-model="tenantDataForm.tenantCompanyContact" placeholder="租户源联系方式" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(tenantDataFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="TenantAddOrUpdateDialog" setup lang="ts">
import {ElNotification, FormInstance} from "element-plus";
import {tenantInfoCreate, tenantInfoQuery, tenantInfoUpdate} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";
import {computed, defineProps, ref} from "vue";
import {useTenantInfoStore} from "@/stores/userInfo/tenantInfo";

let props = defineProps(['title', 'tenantDataForm']);

let title = computed(() => {return props['title']});
let tenantDataForm = computed(() => {return props['tenantDataForm']});

let tenantRules = ref({
    tenantId: [{ required: true, message: '租户编码不能为空', trigger: 'blur' }],
    tenantNameCn: [{ required: true, message: '租户名称-中文不能为空', trigger: 'blur' }],
    tenantName: [{ required: true, message: '租户名称-英文不能为空', trigger: 'blur' }],
    tenantAdminUserId: [{ required: true, message: '租户所属用户不能为空', trigger: 'blur' }],
    tenantDescription: [{ required: true, message: '租户详情描述不能为空', trigger: 'blur' }],
    tenantCompanyName: [{ required: true, message: '租户源公司名称不能为空', trigger: 'blur' }],
    tenantCompanyContact: [{ required: true, message: '租户源联系方式不能为空', trigger: 'blur' }]
});
let userInfoList = ref([]);
let saveLoading = ref(false);

let tenantAddOrUpdateDialogVisible = computed(() => {return useTenantInfoStore().addOrUpdateDialog});
let tenantSearchData = computed(() => {return useTenantInfoStore().tenantSearchData});

// 查询用户信息
let userSearchData = {
    pageInfo: {
        pageSize: 1000,
        pageIndex: 1
    }
}
userInfoQuery(userSearchData).then(res => {
    userInfoList.value = res.data["dataList"]
})

function cancelDialog() {
    useTenantInfoStore().resetAddOrUpdateDialog(false);
}

let tenantDataFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            if (tenantDataForm.value.id === '') {
                // 添加数据
                tenantInfoCreate(tenantDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        tenantInfoQuery(tenantSearchData.value).then(res => {
                            useTenantInfoStore().resetTenantDataList(res.data);
                        })
                        useTenantInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 修改数据
                tenantInfoUpdate(tenantDataForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        });
                        tenantInfoQuery(tenantSearchData.value).then(res => {
                            useTenantInfoStore().resetTenantDataList(res.data);
                        })
                        useTenantInfoStore().resetAddOrUpdateDialog(false);
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">

</style>